<!DOCTYPE HTML>
<html>
	<head>
		<title>movies</title>
		<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
		<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
		<link href="css/megamenu.css" rel="stylesheet" type="text/css" media="all" />
		<script type="text/javascript" src="js/megamenu.js"></script>
		<script>
			$(document).ready(function() {
				$(".megamenu").megamenu();
			});
		</script>
		<script src="js/menu_jquery.js"></script>
		<link rel="stylesheet" href="css/etalage.css">
		<script src="js/jquery.easydropdown.js"></script>
		<script src="js/jquery.etalage.min.js"></script>
		<script>
			jQuery(document).ready(function($) {

				$('#etalage').etalage({
					thumb_image_width: 300,
					thumb_image_height: 400,
					source_image_width: 900,
					source_image_height: 1200,
					show_hint: true,
					click_callback: function(image_anchor, instance_id) {
						alert('Callback example:\nYou clicked on an image with the anchor: "' + image_anchor +
							'"\n(in Etalage instance: "' + instance_id + '")');
					}
				});

			});
		</script>

		<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
		<script type="text/javascript" id="sourcecode">
			$(function() {
				$('.scroll-pane').jScrollPane();
			});
		</script>
		<script type="text/javascript">
		$(function() {
			showPage(1);
			getUser();
			$("#nextPage").click(function() {
				var currentPage = parseInt($("#currentPage").html());
				var totalPage = parseInt($("#totalPage").html());
				if (currentPage < totalPage) {
					var i = $("#i").val();
					if(i==0){
						showPage(currentPage + 1);
					}else if(i==1){
						showMovieByType("动画",currentPage + 1);
					}else if(i==2){
						showMovieByType("动作",currentPage + 1);
					}else if(i==3){
						showMovieByType("剧情",currentPage + 1);
					}else if(i==4){
						showMovieByType("奇幻",currentPage + 1);
					}
				}
			});
			$("#prePage").click(function() {
				var currentPage = parseInt($("#currentPage").html());
				if (currentPage > 1) {
					var i = $("#i").val();
					if(i==0){
						showPage(currentPage - 1);
					}else if(i==1){
						showMovieByType("动画",currentPage - 1);
					}else if(i==2){
						showMovieByType("动作",currentPage - 1);
					}else if(i==3){
						showMovieByType("剧情",currentPage - 1);
					}else if(i==4){
						showMovieByType("奇幻",currentPage - 1);
					}
				}
			});
			$("#firstPage").click(function() {
				var i = $("#i").val();
				if(i==0){
					showPage(1);
				}else if(i==1){
					showMovieByType("动画",1);
				}else if(i==2){
					showMovieByType("动作",1);
				}else if(i==3){
					showMovieByType("剧情",1);
				}else if(i==4){
					showMovieByType("奇幻",1);
				}
			});
			$("#lastPage").click(function() {
				var totalPage = parseInt($("#totalPage").html());
				var i = $("#i").val();
				if(i==0){
					showPage(totalPage);
				}else if(i==1){
					showMovieByType("动画",totalPage);
				}else if(i==2){
					showMovieByType("动作",totalPage);
				}else if(i==3){
					showMovieByType("剧情",totalPage);
				}else if(i==4){
					showMovieByType("奇幻",totalPage);
				}
			});
			$("#ty1").click(function(){
				showMovieByType("动画",1);
				$("#i").val(1);
			});
			$("#ty2").click(function(){
				showMovieByType("动作",1);
				$("#i").val(2);
			});
			$("#ty3").click(function(){
				showMovieByType("剧情",1);
				$("#i").val(3);
			});
			$("#ty4").click(function(){
				showMovieByType("奇幻",1);
				$("#i").val(4);
			});
		});
		function getUser() {
			$.ajax({
				url:"user/getUser",
				type:"get",
				success:function(data){
					if(data!=""){
						$("#userLogin").css("display","none");
						$("#userMessage").css("display","block");
						var content = '<a href="info.html">'
							+'<img alt="" src="'+data.uimg+'" height="40px" style="border-radius: 50%;">&nbsp'
							+'<span style="color:black;" id="uname">'+data.uname+'</span>&nbsp&nbsp'
							+'</a>'
							+'<button type="button" class="btn btn-info" onclick="logout()" style="">注销</button>';
						$("#userMessage").html(content);
					}else{
						$("#userLogin").css("display","block");
						$("#userMessage").css("display","none");
					}
				}
			});
		}
		function logout(){
			$.ajax({
				url:"user/logout",
				type:"get",
				success:function(data){
					getUser();
				}
			});
		}
		function showMovieByType(type,nowPage){
			$.ajax({
				url : "movie/showMovieByType",
				type : "post",
				data : {
					mtype : type,
					currentPage : nowPage
				},
				success : function(data) {
					var content = "";
					var totalPage = data.totalPage;
					var total = data.total;
					for(var i=0;i<data.movies.length;i++){
						content+='<div class="grid1_of_4">'
						+'<div class="content_box">'
						+'<a href="cinema.html?mid='+data.movies[i].id+'">'
						+'<div class="view view-fifth">'
						+'<img src="'+data.movies[i].movieImgs[0].mimg+'" class="img-responsive" alt="" />'
						+'</div>'
						+'<h4>'+data.movies[i].mname+'</h4>'
						+'<button type="button" class="btn btn-danger">选座购票</button>'
						+'</a>'
						+'</div>'
						+'</div>';
					}
					$("#movies").html(content);
					$("#totalPage").html(totalPage);
					$("#total").html(total);
					$("#currentPage").html(nowPage);
				}
			});
		}
		function showPage(nowPage) {
			$("#i").val(0);
			$.ajax({
				url : "movie/showMovieByPage",
				type : "post",
				data : {
					currentPage : nowPage
				},
				success : function(data) {
					var content = "";
					var totalPage = data.totalPage;
					var total = data.total;
					for(var i=0;i<data.movies.length;i++){
						content+='<div class="grid1_of_4">'
						+'<div class="content_box">'
						+'<a href="cinema.html?mid='+data.movies[i].id+'">'
						+'<div class="view view-fifth">'
						+'<img src="'+data.movies[i].movieImgs[0].mimg+'" class="img-responsive" alt="" />'
						+'</div>'
						+'<h4>'+data.movies[i].mname+'</h4>'
						+'<button type="button" class="btn btn-danger">选座购票</button>'
						+'</a>'
						+'</div>'
						+'</div>';
					}
					$("#movies").html(content);
					$("#totalPage").html(totalPage);
					$("#total").html(total);
					$("#currentPage").html(nowPage);
				}
			});
		}
		</script>
	</head>
	<body>
		<input type="hidden" id="i" value="0">
		<!-- header -->
		<div style="height: 100px;">
		<div style="position: fixed;width: 100%;z-index: 999;">
		<div class="header">
			<div class="top_bg" style="background-color: white;">
				<div class="container">
					<div class="header_top">
						<div class="logo">
							<a href="index.html"><img src="images/logo.png" alt="" />蜗牛影院</a>
						</div>
						<div class="top_right" style="margin-top: 0">
							<div id="userMessage" style="line-height: 45px;display: none;">
								<!-- <a href="info.html"><img alt="" src="images/aimg.jpg" height="40px" style="border-radius: 50%;" id="uimg">&nbsp<span style="color:black;" id="uname">1823342352323</span></a> -->
							</div>
							<ul id="userLogin" style="line-height: 45px;display: none;">
								<li><a href="registration.html"><button type="button" class="btn btn-info">注册</button></a></li>|
								<li class="login">
									<div id="loginContainer"><a href="#" id="loginButton"><button type="button" class="btn btn-info">登陆</button></a>
										<div id="loginBox">
											<form id="loginForm">
												<fieldset id="body">
													<fieldset>
														<label for="email">账号</label>
														<input type="text" name="email" id="email">
													</fieldset>
													<fieldset>
														<label for="password">密码</label>
														<input type="password" name="password" id="password">
													</fieldset>
													<input type="submit" id="login" value="登陆">
													<label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住我</i></label>
												</fieldset>
												<span><a href="#">密码忘记了?</a></span>
											</form>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
			</div>
		</div>
		<div class="head-bann">
			<div class="container">
				<div class="head-nav">
					<span class="menu"> </span>
					<ul class="megamenu skyblue">
						<li><a class="color1" href="index.html">首页</a></li>
						<li class="grid"><a class="color2" href="movies.html">影片</a></li>
						<li><a class="color4" href="cinema.html?mid=1">影院</a></li>
						<li><a class="color5" href="comment.html">评论</a></li>
						<div class="clearfix"> </div>
					</ul>
				</div>
			</div>
		</div>
		</div>
		</div>
		<!-- script-for-nav -->
		<script>
			$("span.menu").click(function() {
				$(".head-nav ul").slideToggle(300, function() {
					// Animation complete.
				});
			});
		</script>
		<!-- script-for-nav -->

		<div class="banner1">
			<div class="container">
			</div>
		</div>
		<!-- header -->
		<!-- content -->
		<div class="container">
			<div class="women_main">
				<div class="col-md-3 span_1_of_right">
					<section class="sky-form">
						<div class="product_right">
							<h3 class="m_2">热门影片</h3>
							<a href="cinema.html?mid=1">
							<select class="dropdown" tabindex="10" data-settings='{"wrapperClass":"metro"}'>
								<option value="0">1.哪吒之魔童降世</option>
							</select>
							</a>
							<a href="cinema.html?mid=11">
							<select class="dropdown" tabindex="50" data-settings='{"wrapperClass":"metro"}'>
								<option value="1">2.中国机长</option>
							</select>
							</a>
							<a href="cinema.html?mid=13">
							<select class="dropdown" tabindex="8" data-settings='{"wrapperClass":"metro"}'>
								<option value="1">3.速度与激情：特别行动</option>
							</select>
							</a>
							<a href="cinema.html?mid=4">
							<select class="dropdown" tabindex="8" data-settings='{"wrapperClass":"metro"}'>
								<option value="1">4.烈火英雄</option>
							</select>
							</a>
						</div>

					</section>

					<div class="sellers">
						<h3 class="m_2">影片票房</h3>
						<div class="best">
							<div class="icon">
								<img src="images/sh1.jpg" class="img-responsive" alt="" />
							</div>
							<div class="data">
								<h4><a href="cinema.html?mid=13">速度与激情：特别行动</a></h4>
								<h5>696.76万</h5>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="best">
							<div class="icon">
								<img src="images/sh3.jpg" class="img-responsive" alt="" />
							</div>
							<div class="data">
								<h4><a href="cinema.html?mid=14">宝莱坞机器人2.0</a></h4>
								<h5>421.89万</h5>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="best">
							<div class="icon">
								<img src="images/sh2.jpg" class="img-responsive" alt="" />
							</div>
							<div class="data">
								<h4><a href="cinema.html?mid=1">哪吒之魔童降世</a></h4>
								<h5>354.85万</h5>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>

					<div class="sellers">
						<h3 class="m_2">热门影院</h3>
						<div class="tags">
							<ul>
								<li><a href="choice.html?mid=1&yid=3">1.万达影城</a></li><br/>
								<li><a href="choice.html?mid=1&yid=2">2.太平洋电影城</a></li><br/>
								<li><a href="choice.html?mid=1&yid=1">3.影立方773IMAX影城</a></li><br/>
								<li><a href="choice.html?mid=1&yid=4">4.大地影院</a></li><br/>
							</ul>
						</div>
					</div>

					<section class="sky-form">
						<div class="sellers">
							<h3 class="m_2">影片预告</h3>
							<section class="slider">
								<div class="flexslider">
									<ul class="slides">
										<li>
											<div class="tittle">
												<img src="images/s1.jpg" class="img-responsive" alt="" />
												<h6>诛仙Ⅰ</h6>
												<p>古装,爱情,奇幻</p>
												<p>中国大陆 / 101分钟</p>
												<p>2019-09-13 09:00大陆上映</p>
												<button type="button" class="btn btn-danger">预约订票</button>
											</div>
										</li>
										<li>
											<div class="tittle">
												<img src="images/s2.jpg" class="img-responsive" alt="" />
												<h6>攀登者</h6>
												<p>剧情,冒险</p>
												<p>中国大陆</p>
												<p>2019-09-30大陆上映</p>
												<button type="button" class="btn btn-danger">预约订票</button>
											</div>
										</li>
										<li>
											<div class="tittle">
												<img src="images/s3.jpg" class="img-responsive" alt="" />
												<h6>唐人街探案3</h6>
												<p>喜剧,动作,悬疑</p>
												<p>中国大陆 / 130分钟</p>
												<p>2020-01-25大陆上映</p>
												<button type="button" class="btn btn-danger">预约订票</button>
											</div>
										</li>
										<li>
											<div class="tittle">
												<img src="images/s4.jpg" class="img-responsive" alt="" />
												<h6>双子杀手</h6>
												<p>剧情,动作</p>
												<p>美国</p>
												<p>2019-10-18大陆上映</p>
												<button type="button" class="btn btn-danger">预约订票</button>
											</div>
										</li>
									</ul>
								</div>
							</section>

							<!-- FlexSlider -->
							<script defer src="js/jquery.flexslider.js"></script>
							<script type="text/javascript">
								$(function() {
									$('.flexslider').flexslider({
										animation: "slide",
										start: function(slider) {
											$('body').removeClass('loading');
										}
									});
								});
							</script>
							<!-- FlexSlider -->

						</div>
					</section>


				</div>
				<div class="col-md-9 w_content">
					<div class="women">
						<a href="javascript:void(0)" onclick="showPage(1)">
							<h4>热映影片 - <span id="total">0</span>部 </h4>
						</a>
						<ul class="w_nav">
							<li>类型：</li>
							<li><a href="javascript:void(0)" id="ty1">动画</a></li> |
							<li><a href="javascript:void(0)" id="ty2">动作</a></li> |
							<li><a href="javascript:void(0)" id="ty3">剧情</a></li> |
							<li><a href="javascript:void(0)" id="ty4">奇幻</a></li>
							<div class="clear"></div>
						</ul>
						<div class="clearfix"></div>
					</div>
					<!-- grids_of_4 -->
					<div class="grids_of_4" id="movies">
						<!-- <div class="grid1_of_4">
							<div class="content_box"><a href="details.html">
									<div class="view view-fifth">
										<img src="images/5.jpg" class="img-responsive" alt="" />
										<div class="mask">
											<div class="info">Quick View</div>
										</div>
								</a>
							</div>
							<h4><a href="details.html"> Duis autem</a></h4>
							<p>It is a long established fact that a reader</p>
							<button type="button" class="btn btn-danger">选座购票</button>
						</div>
					</div>
					<div class="grid1_of_4">
						<div class="content_box"><a href="details.html">
								<div class="view view-fifth">
									<img src="images/6.jpg" class="img-responsive" alt="" />
									<div class="mask">
										<div class="info">Quick View</div>
									</div>
							</a>
						</div>
						<h4><a href="details.html"> Duis autem</a></h4>
						<p>It is a long established fact that a reader</p>
						<button type="button" class="btn btn-danger">选座购票</button>
					</div>
				</div>
				<div class="grid1_of_4">
					<div class="content_box"><a href="details.html">
							<div class="view view-fifth">
								<img src="images/7.jpg" class="img-responsive" alt="" />
								<div class="mask">
									<div class="info">Quick View</div>
								</div>
						</a>
					</div>
					<h4><a href="details.html"> Duis autem</a></h4>
					<p>It is a long established fact that a reader</p>
					<button type="button" class="btn btn-danger">选座购票</button>
				</div>
			</div>


			<div class="grid1_of_4">
				<div class="content_box"><a href="details.html">
						<div class="view view-fifth">
							<img src="images/8.jpg" class="img-responsive" alt="" />
							<div class="mask">
								<div class="info">Quick View</div>
							</div>
					</a>
				</div>
				<h4><a href="details.html"> Duis autem</a></h4>
				<p>It is a long established fact that a reader</p>
				<button type="button" class="btn btn-danger">选座购票</button>
			</div>
		</div>
		<div class="grid1_of_4">
			<div class="content_box"><a href="details.html">
					<div class="view view-fifth">
						<img src="images/9.jpg" class="img-responsive" alt="" />
						<div class="mask">
							<div class="info">Quick View</div>
						</div>
				</a>
			</div>
			<h4><a href="details.html"> Duis autem</a></h4>
			<p>It is a long established fact that a reader</p>
			<button type="button" class="btn btn-danger">选座购票</button>
		</div>
		</div>
		<div class="grid1_of_4">
			<div class="content_box"><a href="details.html">
					<div class="view view-fifth">
						<img src="images/10.jpg" class="img-responsive" alt="" />
						<div class="mask">
							<div class="info">Quick View</div>
						</div>
				</a>
			</div>
			<h4><a href="details.html"> Duis autem</a></h4>
			<p>It is a long established fact that a reader</p>
			<button type="button" class="btn btn-danger">选座购票</button>
		</div>
		</div>


		<div class="grid1_of_4">
			<div class="content_box"><a href="details.html">
					<div class="view view-fifth">
						<img src="images/11.jpg" class="img-responsive" alt="" />
						<div class="mask">
							<div class="info">Quick View</div>
						</div>
				</a>
			</div>
			<h4><a href="details.html"> Duis autem</a></h4>
			<p>It is a long established fact that a reader</p>
			<button type="button" class="btn btn-danger">选座购票</button>
		</div>
		</div>
		<div class="grid1_of_4">
			<div class="content_box"><a href="details.html">
					<div class="view view-fifth">
						<img src="images/12.jpg" class="img-responsive" alt="" />
						<div class="mask">
							<div class="info">Quick View</div>
						</div>
				</a>
			</div>
			<h4><a href="details.html"> Duis autem</a></h4>
			<p>It is a long established fact that a reader</p>
			<button type="button" class="btn btn-danger">选座购票</button>
		</div>
		</div>
		<div class="grid1_of_4">
			<div class="content_box"><a href="details.html">
					<div class="view view-fifth">
						<img src="images/13.jpg" class="img-responsive" alt="" />
						<div class="mask">
							<div class="info">Quick View</div>
						</div>
				</a>
			</div>
			<h4><a href="details.html"> Duis autem</a></h4>
			<p>It is a long established fact that a reader</p>
			<button type="button" class="btn btn-danger">选座购票</button>
		</div>
		</div> -->
		
		<div class="clearfix"></div>
		</div>
		<!-- end grids_of_4 -->
		</div>
		<div class="container" style="text-align: center;">
			<ul class="pagination">
				<li class="page-item"><a href="javascript:void(0)" class="page-link" id="firstPage">首页</a></li>
				<li class="page-item"><a href="javascript:void(0)" class="page-link" id="prePage">上一页</a></li>
				<li class="page-item"><a href="javascript:void(0)" class="page-link" id="page"><span id="currentPage">1</span>/<span id="totalPage">1</span></a></li>
				<li class="page-item"><a href="javascript:void(0)" class="page-link" id="nextPage">下一页</a></li>
				<li class="page-item"><a href="javascript:void(0)" class="page-link" id="lastPage">末页</a></li>
			</ul>
		</div>
		<div class="clearfix"></div>
		</div>
		</div>
		<!-- content -->
		<!-- footer -->
		<div class="footer">
			<div class="container">
				<p>Copyright &copy; 2015.Company name All rights reserved.</p>
			</div>
		</div>
		<!-- footer -->

	</body>
</html>
